<!--
 * @Description: In User Settings Edit 
 * @Author: your name
 * @Date: 2019-09-18 13:58:10
 * @LastEditTime: 2019-09-20 15:29:19
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="main">

    <view v-if="ls_isEdit" v-for="(item,index) in ls_table_attr" :key="index" class="ls">
      <view @click="switchClass" :data-key='index' class="time_kc_xx" :class="ls_status.switch_index==index?'hover':''">{{item.name}}</view>
    </view>


    <view
      class="con-wrap ripple"
      :class="[cardRightIn?'fadeInRight':''] [cardLeftIn?'fadeInLeft':'']"
      v-for="(item,index) in week_kecheng"
      :key="item._id"
      v-show="index==currentIndex"
    >
      <view class="card-box"  :data-index="index">
        <view v-show="index!==1">


          <!-- 时间喝月份 -->
          <view class="top">
            <view class="top-text">
              <view>{{ls_time_month}}</view>
              <view>月</view>
            </view>
            <view v-for="(item_a,index_a) in ls_time_week" class="top-text" :key="index_a">
              <view :class="item_a.k">
                <view>{{item_a.weeks}}</view>
                <view>{{item_a.days}}</view>
              </view>
            </view>
          </view>

          <view style="height:1000rpx;width:730rpx;display:flex;">

            <!-- 左侧 -->
            <view style="background-color:#f8f8f8;color:#666666;">
              <view
                v-for="(item_a,index_a) in times"
                :key="index_a"
                class="left"
                :class="item_a.class2"
              >{{item_a.name}}</view>
            </view>

            <!-- 到校时间 -->
            <view>
              <view class="kebiao">
                <view class="kebiao_bs">
                  7:30到校
                  <text class="icon iconfont icon-combinedshapecopy2"></text>
                </view>
              </view>
            </view>

              <!-- 虚线 -->
            <view v-for="(item_a,index_a) in [1,2,3,4]" :key="index_a">
              <view
                style="width:750rpx; position: absolute;border-bottom:1rpx dashed #e9e8e8;box-sizing: border-box;"
                :style="{marginTop:(index_a+1)*100+59+'rpx'}"
              ></view>
            </view>

            <!-- 午餐和休息 -->
            <view>
              <view class="kebiao kebiao2">
                <view class="kebiao_bs">
                  午餐及休息
                  <text class="icon iconfont icon-combinedshapecopy2"></text>
                </view>
              </view>
            </view>

            <!-- 虚线 -->
            <view v-for="(item_a,index_a) in [5,6,7,8]" :key="index_a">
              <view
                style="width:750rpx; position: absolute;border-bottom:1rpx dashed #e9e8e8;"
                :style="{marginTop:(index_a+1)*100+419+'rpx'}"
              ></view>
            </view>

            <!-- 放学 -->
            <view>
              <view class="kebiao kebiao3">
                <view class="kebiao_bs">
                  放学
                  <text class="icon iconfont icon-combinedshapecopy2"></text>
                </view>
              </view>
            </view>

            <!-- 主要内容--上午课程 -->
            <view v-for="(item_a,index_a) in ls_table_show.am" :key="index_a">
              <view
                v-for="(item_aa,index_aa) in item_a"
                :key="index_aa"
                class="flex-item kcb-item"
                :class="ls_table_attr[item_aa].backClass?ls_table_attr[item_aa].backClass:(ls_isEdit?'add':'')"
                @click="add_table('am',index_a,index_aa)"
                data-statu="open"
                :data-index="index_aa"
                :style="{marginLeft:(index_a)*94+10+'rpx',marginTop:(index_aa+1)*100-35+'rpx',height:1*100-10+'rpx'}"
              >
                  <view class="smalltext">{{ls_table_attr[item_aa].name}}</view>
              </view>
            </view>

            <!-- 主要内容--下午课表 -->
            <view v-for="(item_a,index_a) in ls_table_show.pm" :key="index_a">
              <view
                v-for="(item_aa,index_aa) in item_a"
                :key="index_aa"
                class="flex-item kcb-item"
                :class="ls_table_attr[item_aa].backClass?ls_table_attr[item_aa].backClass:(ls_isEdit?'add':'')"
                @click="add_table('pm',index_a,index_aa)"
                data-statu="open"
                :data-index="index_aa"
                :style="{marginLeft:(index_a)*94+10+'rpx',marginTop:(index_aa)*100+600-73+'rpx',height:item_a.skcd*90-5+'rpx'}"
              >
                  <view class="smalltext" >{{ls_table_attr[item_aa].name}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


      <view class='pinglun_jia' @click="edit_table" v-show="!ls_isEdit">
        <image src='/static/images/kecheng.png'></image>
      </view>
      <button v-if="ls_isEdit" class="saveTable" @click="saveTable">保存</button>
  </div>
</template>


<script>
var touchDot = 0; //触摸时的原点
var time = 0; // 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = ""; // 记录/清理时间记录
var kecheng = 0;
var app = getApp();
export default {
  data() {
    return {
      currentIndex: 0,
      cardRightIn: false,
      cardLeftIn: false,
      len: 2,

      times: [
        {
          name: "上学",
          class2: "left2"
        },
        {
          name: "08:00",
          class2: ""
        },
        {
          name: "09:00",
          class2: ""
        },
        {
          name: "10:00",
          class2: ""
        },
        {
          name: "11:00",
          class2: ""
        },
        {
          name: "午休",
          class2: "left2"
        },
        {
          name: "14:00",
          class2: ""
        },
        {
          name: "15:00",
          class2: ""
        },
        {
          name: "16:00",
          class2: ""
        },
        {
          name: "放学",
          class2: "left2"
        },
        {
          name: "课外班",
          class2: "left2"
        }
      ],

      week_kecheng: [
        {
          week_day: [
            {
              week: "一",
              day: 16
            },
            {
              week: "二",
              day: 17,
              k: "top-text2"
            },
            {
              week: "三",
              day: 18
            },
            {
              week: "四",
              day: 19
            },
            {
              week: "五",
              day: 20
            },
            {
              week: "六",
              day: 21
            },
            {
              week: "日",
              day: 22
            }
          ],
          xw_kc: [
            {
              xqj: 1,
              skjc: 1,
              skcd: 1,
              kcmc: "品德",
              bg: "pinde"
            },
            {
              xqj: 2,
              skjc: 1,
              skcd: 1,
              kcmc: "自然",
              bg: "ziran"
            },
            {
              xqj: 3,
              skjc: 1,
              skcd: 1,
              kcmc: "音乐",
              bg: "yinyue"
            },
            {
              xqj: 4,
              skjc: 1,
              skcd: 1,
              kcmc: "体育",
              bg: "tiyu"
            },
            {
              xqj: 5,
              skjc: 1,
              skcd: 1,
              kcmc: "班会",
              bg: "banhui"
            },
            {
              xqj: 1,
              skjc: 2,
              skcd: 1,
              kcmc: "美术",
              bg: "meishu"
            },
            {
              xqj: 2,
              skjc: 2,
              skcd: 1,
              kcmc: "体育",
              bg: "tiyu"
            },
            {
              xqj: 3,
              skjc: 2,
              skcd: 1,
              kcmc: "品德",
              bg: "pinde"
            },
            {
              xqj: 4,
              skjc: 2,
              skcd: 1,
              kcmc: "自然",
              bg: "ziran"
            },
            {
              xqj: 5,
              skjc: 2,
              skcd: 1,
              kcmc: "班会",
              bg: "banhui"
            },
            {
              xqj: 1,
              skjc: 3,
              skcd: 1,
              kcmc: "品德",
              bg: "pinde"
            },
            {
              xqj: 2,
              skjc: 3,
              skcd: 1,
              kcmc: "自然",
              bg: "ziran"
            },
            {
              xqj: 3,
              skjc: 3,
              skcd: 1,
              kcmc: "音乐",
              bg: "yinyue"
            }
          ],
          sw_kc: [
            {
              xqj: 3,
              skjc: 2,
              skcd: 1,
              kcmc: "数学",
              bg: "shuxue"
            },
            {
              xqj: 4,
              skjc: 2,
              skcd: 1,
              kcmc: "数学",
              bg: "shuxue"
            },
            {
              xqj: 5,
              skjc: 2,
              skcd: 1,
              kcmc: "语文",
              bg: "yuwen"
            },
            {
              xqj: 1,
              skjc: 3,
              skcd: 1,
              kcmc: "英文",
              bg: "yingwen"
            },
            {
              xqj: 2,
              skjc: 3,
              skcd: 1,
              kcmc: "语文",
              bg: "yuwen"
            },
            {
              xqj: 3,
              skjc: 3,
              skcd: 1,
              kcmc: "语文",
              bg: "yuwen"
            },
            {
              xqj: 4,
              skjc: 3,
              skcd: 1,
              kcmc: "英文",
              bg: "yingwen"
            },
            {
              xqj: 5,
              skjc: 3,
              skcd: 1,
              kcmc: "数学",
              bg: "shuxue"
            },
            {
              xqj: 1,
              skjc: 4,
              skcd: 1,
              kcmc: "数学",
              bg: "shuxue"
            },
            {
              xqj: 2,
              skjc: 4,
              skcd: 1,
              kcmc: "数学",
              bg: "shuxue"
            },
            {
              xqj: 3,
              skjc: 4,
              skcd: 1,
              kcmc: "英文",
              bg: "yingwen"
            },
            {
              xqj: 4,
              skjc: 4,
              skcd: 1,
              kcmc: "语文",
              bg: "yuwen"
            },
            {
              xqj: 5,
              skjc: 4,
              skcd: 1,
              kcmc: "英文",
              bg: "yingwen"
            },
            {
              xqj: 1,
              skjc: 5,
              skcd: 1,
              kcmc: "体育",
              bg: "tiyu"
            },
            {
              xqj: 2,
              skjc: 5,
              skcd: 1,
              kcmc: "美术",
              bg: "meishu"
            },
            {
              xqj: 3,
              skjc: 5,
              skcd: 1,
              kcmc: "体育",
              bg: "tiyu"
            },
            {
              xqj: 4,
              skjc: 5,
              skcd: 1,
              kcmc: "音乐",
              bg: "yinyue"
            },
            {
              xqj: 5,
              skjc: 5,
              skcd: 1,
              kcmc: "自然",
              bg: "ziran"
            },
            {
              xqj: 6,
              skjc: 2,
              skcd: 2,
              kcmc: "爵士舞(张小米）",
              bg: "others"
            },
            {
              xqj: 7,
              skjc: 2,
              skcd: 2,
              kcmc: "二胡(张小米）",
              bg: "others"
            }
          ]
        }
      ],
      
      
      ls_isEdit:false,  //是否为编辑状态
      // 顺序为无，语，数，外，物，化，生，德，智，体，美，劳，自，音,班会
      ls_table_attr:[
        {name:'',backClass:''},
        {name:'语文',backClass:'yuwen'},
        {name:'数学',backClass:'shuxue'},
        {name:'英语',backClass:'yingwen'},
        {name:'物理',backClass:'wuli'},
        {name:'化学',backClass:'huaxue'},
        {name:'生物',backClass:'shenwu'},
        {name:'品德',backClass:'pinde'},
        {name:'智力',backClass:'zhili'},
        {name:'体育',backClass:'tiyu'},
        {name:'美术',backClass:'meishu'},
        {name:'劳动',backClass:'laodong'},
        {name:'自然',backClass:'ziran'},
        {name:'音乐',backClass:'yinyue'},
        {name:'班会',backClass:'banhui'}
      ],
      ls_table_show:{

      },
      ls_time_month:'--',
      ls_time_week:[],
      ls_time_table:{
        '2019-09-09':{
          am:[0,1,2,3],
          pm:[3,2,1]
        },
        '2019-09-10':{
          am:[0,1,2,3],  //上午的课最多四个
          pm:[3,2,1]   //下午的课最多三个
        },
        '2019-09-11':{
          am:[0,1,2,3],
          pm:[3,2,1]
        },
        '2019-09-12':{
          am:[0,1,2,3],
          pm:[3,2,1]
        },
        '2019-09-13':{
          am:[0,1,2,3],
          pm:[3,2,1]
        },
        '2019-09-14':{
          am:[0,1,2,3],
          pm:[3,2,1]
        },
        '2019-09-15':{
          am:[0,1,2,3],
          pm:[3,2,1]
        }
      },
      ls_status:{
        switch_index:0
      }
    };
  },

  onLoad() {
    this.$set(this, "kechengs", this.week_kecheng[0]);
    this.time_to_week()
    this.time_to_table()
  },

  methods: {
    time_to_week(){
      const day=['日','一','二','三','四','五','六']
      const time = Object.keys(this.ls_time_table)
      // 设置月
      this.$set(this,'ls_time_month',new Date(time[0]).getMonth()+1)
      // 设置周
      const a = time.map((item,index)=>{
        const date = new Date(item)
        return {
          days:date.getDate()+'号',
          weeks:'周'+day[date.getDay()]
        }
      })
      this.$set(this,'ls_time_week',a)
    },
    // 数据变成课表
    time_to_table(){
        const kb = Object.values(this.ls_time_table)
        const table = {
          am:[],
          pm:[]
        } 
        kb.filter((item,index)=>{
          table.am.push(item.am)
          table.pm.push(item.pm)
        })
        console.log(table)
        this.$set(this,'ls_table_show',table)
    },
    // 编辑课表
    edit_table(){
      this.$set(this,'ls_isEdit',true)
    },
    // 保存课表
    saveTable(){
      this.$set(this,'ls_isEdit',false)
    },
    // 切换选择的课程
    switchClass(e){
      const index = e.currentTarget.dataset.key
      this.$set(this.ls_status,'switch_index',index)
    },
    // 增加课程
    add_table(day_half,x,y){
      if(!this.ls_isEdit) return false;
      if(!this.ls_status.switch_index){
        wx.showToast({
          title: '请先选择课程',
          icon: 'none',
          duration: 1000
        })
      }else{
        const weekIndex = Object.keys(this.ls_time_table)
        const weekName = weekIndex[x]
        this.$set(this.ls_time_table[weekName][day_half],y,this.ls_status.switch_index)
      }

    }



    
  }
};
</script>
 


<style lang="less" scoped>
.ls{
  display:inline-block;
  &:first-child{
    display:none;
  }
}
.time_kc_xx{
  border-radius: 10rpx;
  border: 1px solid #dcdcdc;
  display:inline-block;
  width: 165rpx;
  height: 64rpx;
  color: #333;
  margin-left: 8rpx;
  margin-right: 8rpx;
  margin-bottom: 20rpx;
  text-align: center;
  line-height: 64rpx;
  font-size: 30rpx;
  box-sizing: border-box;
}

.time_kc_xx.hover {
  background: #ffebf1;
  border: none;
}
.flex-item {
  width: 85rpx;
  height: 80rpx;
}

.kcb-item {
  position: absolute;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.smalltext {
  font-size: 8pt;
  color: #333;
  padding-left: 2px;
}

.top {
  background-color: #ebf8ff;
  color: #333;
  height: 110rpx;
  font-size: 28rpx;
}

.top-text {
  float: left;
}

.top-text view {
  line-height: 55rpx;
  text-align: center;
  display: block;
  font-size: 28rpx;
}

.top-text {
  width: 12.5%;
  font-size: 9pt;
  align-items: center;
}

.top-text2 {
  width: 60rpx;
  height: 100rpx;
  display: block;
  margin: 5rpx auto;
  border-radius: 60rpx;
  background: #fd6a97;
  color: #fff;
}

.scroll {
  height: 1170rpx;
  z-index: 101;
  position: fixed;
}

.left {
  width: 90rpx;
  height: 100rpx;
  justify-content: center;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #e9e8e8;
  box-sizing: border-box;
  color: #666;
  font-size: 24rpx;
}

.pinglun_jia {
  width: 115rpx;
  height: 115rpx;
  position: fixed;
  right: 20rpx;
  bottom: 20rpx;
  z-index: 121;
}

.pinglun_jia image {
  width: 115rpx;
  height: 115rpx;
}

.zixun_a .icon {
  color: #435774;
}

.time_head {
  overflow: hidden;
  width: 690rpx;
  margin: 0 auto 30rpx auto;
}

page {
  background: #fff;
}

.time_head_r {
  font-size: 27rpx;
  background: #00a4ff;
  height: 50rpx;
  line-height: 50rpx;
  width: 286rpx;
  float: right;
  text-align: center;
  color: #fff;
  border-radius: 50rpx;
  margin-top: 20rpx;
}

.time_head_l {
  width: 350rpx;
  float: left;
}

.time_head_l .icon {
  margin-left: 10rpx;
}

.time_head_title {
  font-size: 33rpx;
  color: #000;
}

.time_head_title2 {
  font-size: 23rpx;
  color: #666;
  line-height: 25rpx;
}

.time_head_title2 .icon {
  font-size: 18rpx;
}

.left2 {
  height: 60rpx;
  color: #333;
  font-size: 26rpx;
  line-height: 60rpx;
}

.kebiao {
  width: 750rpx;
  margin-top: 0rpx;
  position: absolute;
  height: 60rpx;
}

.kebiao2 {
  margin-top: 460rpx;
}

.kebiao3 {
  margin-top: 820rpx;
}

.kebiao_bs {
  width: 475rpx;
  background: #f8f8f8;
  height: 60rpx;
  text-align: center;
  font-size: 26rpx;
  line-height: 60rpx;
}

.kebiao_bs .icon {
  color: #d2d2d2;
  font-size: 24rpx;
  margin-left: 10rpx;
}

.add{
  background: url('http://www.tongxikj.com/img/add.png') no-repeat left top;
  background-size:100% 100%;
}
.yuwen {
  background: #ffebf1;
}

.yingwen {
  background: #ebffeb;
}

.shuxue,
.meishu,
.banhui,
.pinde {
  background: #ebf8ff;
}

.tiyu,
.meishu,
.yinyue,
.ziran {
  background: #fff1eb;
}

.others {
  background: #fffbe0;
}
.mbt20 {
  margin-top: 20rpx;
}

.saveTable{
  position:fixed;
  background:#1dbfff;
  color:white;
  width:80%;
  left:10%;
  bottom:2vh;
  box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}
</style>

